<template>
  <div class="home">
    <h3>今天是搬砖的第{{day}}天</h3>
    <h3>我是通过methods计算出来的搬砖工资{{price()}}</h3>
     <h3>我是通计算属性计算出来的搬砖工资{{totalPrice}}</h3>
      <h3>我是通watch监听计算出来的搬砖工资{{totalMoney}}</h3>
     <h2>双十一打折价格{{disPrice()}}</h2>
     <!-- <h3>我是通计算属性计算出来的搬砖工资{{totalPrice}}</h3>
     <h3>我是通计算属性计算出来的搬砖工资{{totalPrice}}</h3>
     <h3>我是通计算属性计算出来的搬砖工资{{totalPrice}}</h3> -->
    <button @click="day++">搬砖的第{{day}}天</button>
    <h2>methods计算总价格：{{countPrice()}}</h2>
    <h2>computed计算总价格：{{goodsTotal}}</h2>
    <button @click="goodsNum++">商品数量++</button>

    <button @click="obj.age++">age++</button>


  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
//   name: 'HomeView',
  components: {
    // HelloWorld
  },
  data() {
    return {
         day:2,
         goodsPrice:199,
         goodsNum:2,
         originPrice:1999,
         totalMoney:800,
         obj:{
            age:18
         }

    }
  },
//   methods 调用一次执行一次，视图更新的时候，也会触发他 所以当我们的页面逻辑很复杂的时候，如果写大量的methods方法，会加慢页面的更新速度  
  methods: {
    // 搬砖工资的方法
    price(){
        console.log('我触发了吗');
        return this.day*400
    },
    disPrice(){
        console.log('打折的方法会触发吗');
        return this.originPrice*0.7
    },
    countPrice(){
        console.log('计算总价格的方法');
        return this.goodsPrice*this.goodsNum
    }
  },
//   只有当前的依赖值发生变化的时候才会触发  如果依赖不变化，每次从缓存里面去取
  computed:{
    totalPrice(){
        console.log('111');
        return this.day*400
    },
    goodsTotal(){
        console.log('2222');
        return this.goodsPrice*this.goodsNum
    }
  },
  watch:{
     day(newVal,oldVal){
        // console.log(newVal,oldVal);
        this.totalMoney = newVal*400

     },
    //  day:{
    //     handler(){

    //     }
    //  }
    // 监听对象里面的属性值  不需要深度监听，就可以监听到
    "obj.age":{
       handler(newVal,oldVal){
         console.log(newVal,oldVal);
       },
    //    deep:true,//监听对象内部的变化使用深度监听
    //    immediate:true//进入页面就开始监听
    },
    // wathch 可以监听计算属性里面的方法
    goodsTotal(newVal){
        console.log(newVal);

    }
  }
}
</script>
